{% load static %}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" />
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="{% static 'css/detail.css' %}"/>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
	</head>
	<body>
		<div class="navigation">
				<img src="{% static 'img/LOGOOOO.png' %}" class="Logo">
				<a href="{% url 'Home_Page' %}" class="before">寻物启事</a>
				<a href="{% url 'Second_Page' %}" class="before">失物招领</a>
				<a href="{% url 'publish' %}" class="before">发布帖子</a>
				<a href="{% url 'about' %}" class="last">关于</a>
                {% if request.session.is_login == True %}
                    <a href="{% url 'per_center' %}" class="last">个人中心</a>
                {% else %}
                    <a href="{% url 'login' %}" class="last">登录 . 注册</a>
                {% endif %}
        </div>
		<div class="first">
		<div class="other">
			<h1>
				<b>○</b>
			</h1>
            {% if not picture %}
                <img src="{% static 'img/OIP-C.jpg' %}">
            {% else %}
                <img src="/media/{{ picture }}">
            {% endif %}
			<p>昵称:<span>{{ data.users.user_name }}</span></p>
			<p>ID:<span>{{ data.users.user_id }}</span></p>
		</div>
		<div class="box">
			<div class="picture">
				<div class="banner" >
				     <div class="img-wrap">
				         <ul>
                             {% for picture in pictures %}
				             <li class="item" style="display: block">
				                 <a href="#"><img src="/media/{{ picture }}" alt="" class="lunbo"></a>
				             </li>
                             {% endfor %}
				        </ul>
				    </div>
				    <div class="lr-tab">
				        <div class="left btn"></div>
				        <div class="right btn"></div>
				    </div>
				    <div class="tab-btn">
				    <ul>
                        {% for picture in pictures %}
				        <li class="btn"></li>
                        {% endfor %}
				    </ul>
				    </div>
				</div>
			</div>
		<div class="information">
			<h1><b>●物品信息</b></h1>
				<p>物品名称：
				<span >{{ data.o_name }}</span>
				</p>
				<p>物品分类：
				<span >{{ data.o_classification }}</span>
				</p>
				<p>物品详情：
				<div id="hhh">{{ data.o_detail }}</div>
				</p>
		</div>
		<div class="information">
			<h1><b>●相关信息</b></h1>
				<p>丢失时间：
				<span>{{ data.o_date }}</span>
				</p>
				<p>丢失地点：
				<span>{{ data.o_place }}</span>
				</p>
		</div>
		<div class="information">
			<h1><b>●联系方式</b></h1>
				<p>{{ data.o_contact_type }}：
                {% if request.session.is_login == True %}
				    <span>{{ data.o_contact_details }}</span>
                {% else %}
                    <span>********</span>
                    <span style="font-size: initial;color: red;">(登录后查看联系方式)</span>
                {% endif %}
				</p>
		</div>
            <!-- Modal -->
        <div style="width: 100%;">
            <div class="give_back" style="width: 82px;height: 130px;line-height: 130px;margin: auto;">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
             归还
            </button>
            </div>
        </div>
            <!-- Modal -->
            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"style="top: 200px" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"><br>温馨提示</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                      是否确认归还！<br>
                      如果确认，我们将以短信的方式通知失主，并附带您的注册手机号。
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <a href="/give_back?give_back={{ data.users.user_id }}&object={{ data.o_number }}" type="button" class="btn btn-primary">确认归还</a>
                  </div>
                </div>
              </div>
            </div>
            <!-- Modal -->
{#			<div class="btn">#}
{#				<!-- <a href="#">领取</a> -->#}
{#				<button>归还</button>#}
{#			</div>#}
		</div>
		<div class="person">
            <div class="new_info">最新消息</div>
                {% for new in news %}
                <div onclick="window.open('{{ new.new_url }}')" class="new">
                <p>{{ new.new_date|date:'Y-m-d H:i' }}</p>
                    .{{ new.new_text }}
                </div>
                {% endfor %}
        </div>
		</div>
	</body>
	<script type="text/javascript" src="{% static 'js/detail.js' %}"></script>
</html>
